<template>
    <div class="bD">
        <div class="left">
            <el-form :inline="true" :model="DetailForm" width="100">
                <div class="one">
                    <div class="header">
                        <p>客户资料/{{ DetailForm.name }}</p>
                    </div>
                    <div class="con">
                        <div class="item">
                            <h4>客户姓名</h4>
                            <el-form-item>
                                <el-input v-model="DetailForm.name" clearable placeholder="请输入客户姓名" />
                            </el-form-item>
                        </div>
                        <div class="item">
                            <h4>手机号码</h4>
                            <el-form-item>
                                <el-input v-model="DetailForm.phone" clearable placeholder="请输入手机号码" />
                            </el-form-item>
                        </div>
                        <div class="item">
                            <h4>职业</h4>
                            <el-form-item>
                                <el-select v-model="DetailForm.occupation" clearable placeholder="请选择职业">
                                    <el-option v-for="item in occupationOption" :key="item.value" :label="item.label"
                                        :value="item.value" />
                                </el-select>
                            </el-form-item>
                        </div>
                    </div>
                    <div class="con">
                        <div class="item">
                            <h4>学历</h4>
                            <el-form-item>
                                <el-select v-model="DetailForm.education" clearable placeholder="请选择学历">
                                    <el-option v-for="item in educationOption" :key="item.value" :label="item.label"
                                        :value="item.value" />
                                </el-select>
                            </el-form-item>
                        </div>
                        <div class="item">
                            <h4>所在地区</h4>
                            <el-form-item>
                                <el-cascader :options="areaOptions" ref="cascaderAddr" v-model="thisWorld"
                                    placeholder="请输入所在地区" :key="modalKey" @change="handleChange">
                                </el-cascader>
                            </el-form-item>
                        </div>
                        <div class="item">
                            <h4>微信号码</h4>
                            <el-form-item>
                                <el-input v-model="DetailForm.weixin" clearable placeholder="请输入微信号码" />
                            </el-form-item>
                        </div>
                    </div>
                    <div class="con">
                        <div class="item">
                            <h4>年龄</h4>
                            <el-form-item>
                                <el-input-number v-model="DetailForm.age" clearable placeholder="请输入年龄" />
                            </el-form-item>
                        </div>
                        <div class="item">
                            <h4>QQ</h4>
                            <el-form-item>
                                <el-input v-model="DetailForm.qq" clearable placeholder="请输入QQ号码" />
                            </el-form-item>
                        </div>
                        <div class="item">
                            <h4>性别</h4>
                            <el-form-item>
                                <el-select v-model="DetailForm.gender" clearable placeholder="请选择性别">
                                    <el-option v-for="item in genderOption" :key="item.value" :label="item.label"
                                        :value="item.value" />
                                </el-select>
                            </el-form-item>
                        </div>
                    </div>
                    <div class="con">
                        <div class="item">
                            <h4>身高</h4>
                            <el-form-item>
                                <el-input-number v-model="DetailForm.height" clearable placeholder="请输入身高" />
                            </el-form-item>
                        </div>
                        <div class="item">
                            <h4>体重</h4>
                            <el-form-item>
                                <el-input-number v-model="DetailForm.weight" clearable placeholder="请输入体重" />
                            </el-form-item>
                        </div>
                        <div class="item">
                            <h4>备注</h4>
                            <el-form-item>
                                <el-input v-model="DetailForm.remark" clearable placeholder="请输入备注" />
                            </el-form-item>
                        </div>
                    </div>
                </div>
                <div class="one">
                    <div class="header">
                        <p>客户意向</p>
                    </div>
                    <div class="con">
                        <div class="item">
                            <h4>意向类型</h4>
                            <el-form-item>
                                <el-select v-model="DetailForm.type" clearable placeholder="请选择课程分类">
                                    <el-option v-for="item in typeOption" :key="item.value" :label="item.label"
                                        :value="item.value" />
                                </el-select>
                            </el-form-item>
                        </div>
                        <div class="item">
                            <h4>意向课程</h4>
                            <el-form-item>
                                <el-select v-model="DetailForm.courseId" clearable placeholder="请选择课程分类">
                                    <el-option v-for="item in courseIdOption" :key="item.value" :label="item.label"
                                        :value="item.value" />
                                </el-select>
                            </el-form-item>
                        </div>
                        <div class="item">
                            <h4>健身原因</h4>
                            <el-form-item>
                                <el-input v-model="DetailForm.reason" clearable placeholder="请输入健身原因" />
                            </el-form-item>
                        </div>
                    </div>
                    <div class="con">
                        <div class="item">
                            <h4>每周健身时间</h4>
                            <el-form-item>
                                <el-input-number v-model="DetailForm.hours" clearable placeholder="请输入每周健身时间" />
                            </el-form-item>
                        </div>
                        <div class="item">
                            <h4>意向金额</h4>
                            <el-form-item>
                                <el-input-number v-model="DetailForm.money" clearable placeholder="请输入意向金额" />
                            </el-form-item>
                        </div>
                        <div class="item">
                            <h4>其他意向</h4>
                            <el-form-item>
                                <el-input v-model="DetailForm.otherIntention" clearable placeholder="请输入其他意向" />
                            </el-form-item>
                        </div>
                    </div>
                </div>
                <div class="one">
                    <div class="header">
                        <p>沟通记录</p>
                    </div>
                    <div class="con">
                        <div class="item">
                            <h4>跟进状态</h4>
                            <el-form-item>
                                <el-select v-model="DetailForm.status" clearable placeholder="请选择跟进状态">
                                    <el-option v-for="item in statusOption" :key="item.value" :label="item.label"
                                        :value="item.value" />
                                </el-select>
                            </el-form-item>
                        </div>
                        <div class="item">
                            <h4>下次跟进时间</h4>
                            <el-form-item>
                                <el-date-picker v-model="DetailForm.nextTime" type="datetime" placeholder="请选择下次跟进时间" />
                            </el-form-item>
                        </div>
                        <div class="item">
                            <h4>沟通重点</h4>
                            <el-form-item>
                                <el-select v-model="DetailForm.zhongdian" clearable placeholder="请选择沟通重点">
                                    <el-option v-for="item in focusOption" :key="item.value" :label="item.label"
                                        :value="item.value" />
                                </el-select>
                            </el-form-item>
                        </div>
                    </div>
                    <div class="con">
                        <div class="item_last">
                            <h4>沟通纪要</h4>
                            <el-form-item>
                                <el-input v-model="DetailForm.info" clearable placeholder="请输入沟通纪要" />
                            </el-form-item>
                        </div>
                    </div>
                    <div class="footer">
                        <el-button @click="goBack">返回</el-button>
                        <el-button type="primary" @click="addBusinessForm">保存</el-button>
                        <el-button type="success" @click="addBusinessForm">转为成交客户</el-button>
                    </div>
                </div>
            </el-form>
        </div>
        <div class="right">
            <div class="header">
                <p>商品跟进记录</p>
            </div>
            <div class="con" v-for="(item, index) in RecordList" :key="index">
                <h2>{{ item.createBy }}:<span>{{ item.info }}</span></h2>
                <p>{{ item.createTime }}</p>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router';
import { BusinessDetail, BusinessCourse, BusinessClass, followBusiness, BusinessSex, BusinessOccupation, BusinessEducation, BusinessStatus, BusinessFocus, BusinessType, BusinessRecord } from "../../../api/index"
import { ElMessage } from 'element-plus';
import useTagsViewStore from '@/store/modules/tagsView'
import { nextTick } from 'process';
import processedData from '../../../assets/pac.json';
function replaceValueWithLabel(data: any[]): any[] {
    return data.map(item => {
        const newItem = { ...item };
        if (newItem.children && Array.isArray(newItem.children)) {
            newItem.children = replaceValueWithLabel(newItem.children);
        }
        newItem.value = newItem.label;
        return newItem;
    });
}
const pcas = replaceValueWithLabel(processedData);
const route = useRoute();
const router = useRouter();
const businessId = route.query.id
const BusinessOption = ref([])
const courseIdOption = ref([])
const focusOption = ref([])
const occupationOption = ref([])
const educationOption = ref([])
const statusOption = ref([])
const genderOption = ref([])
const typeOption = ref([])
const areaOptions = pcas
const cascaderAddr = ref(null);
const thisWorld = ref([])
const modalKey = ref(0);
const handleChange = () => {
    if (cascaderAddr.value) {
        const thsAreaCode = cascaderAddr.value.getCheckedNodes()[0].pathLabels;
        console.log(thsAreaCode);
        console.log(thsAreaCode[0] + thsAreaCode[1] + thsAreaCode[2]);
        DetailForm.value.province = thsAreaCode[0]
        DetailForm.value.city = thsAreaCode[1]
        DetailForm.value.area = thsAreaCode[2]
    }
}
const getDetailList = () => {
    BusinessDetail(businessId).then(res => {
        const data = res.data.data;

        // 赋值操作
        DetailForm.value.name = data.name;
        DetailForm.value.phone = data.phone;
        DetailForm.value.gender = data.gender;
        DetailForm.value.age = data.age;
        DetailForm.value.nextTime = data.nextTime;
        DetailForm.value.qq = data.qq;
        DetailForm.value.weixin = data.weixin;
        DetailForm.value.status = data.status;

        // 其他字段的赋值
        DetailForm.value.area = data.area || "";
        DetailForm.value.city = data.city || "";
        DetailForm.value.courseId = data.courseId || "";
        DetailForm.value.education = data.education || "";
        DetailForm.value.height = data.height || 0;
        DetailForm.value.hours = data.hours || 0;
        DetailForm.value.info = data.info || "";
        DetailForm.value.money = data.money || 0;
        DetailForm.value.occupation = data.occupation || "";
        DetailForm.value.otherIntention = data.othenIntention || "";
        DetailForm.value.province = data.province || "";
        DetailForm.value.reason = data.reason || "";
        DetailForm.value.remark = data.remark || "";
        DetailForm.value.weight = data.weight || 0;
        thisWorld.value = [data.province, data.city, data.area];
    })
}

const formInline = reactive({
    user: '',
    region: '',
    date: '',
})
const DetailList = ref([])
const DetailForm = ref({
    "age": 0,
    "area": "",
    "businessId": businessId,
    "city": "",
    "courseId": "",
    "education": "",
    "gender": "",
    "height": "",
    "hours": "",
    "info": "",
    "money": 0,
    "name": "",
    "nextTime": "",
    "occupation": "",
    "otherIntention": "",
    "phone": "",
    "province": "",
    "qq": "",
    "reason": "",
    "remark": "",
    "status": "",
    "weight": 0,
    "weixin": "",
    "zhongdian": "",
})
const goBack = () => {
    useTagsViewStore().delView(router.currentRoute.value);
    router.go(-1)
}
const addBusinessForm = () => {
    DetailForm.value.nextTime = ""
    followBusiness(DetailForm.value).then((res: any) => {
        if (res.data.code != 200) return ElMessage.error("商机跟进失败");
        ElMessage.success("商机跟进成功");
    });
}
const getBusinessList = () => {
    BusinessClass().then((res: any) => {
        if (res.data.code != 200) return ElMessage.error("查询课程失败");
        BusinessOption.value = res.data.data.map(item => ({
            value: item.courseId,
            label: item.name
        }));
    });
}
const getClassList = () => {
    BusinessCourse().then((res: any) => {
        if (res.data.code != 200) return ElMessage.error("查询课程失败");
        courseIdOption.value = res.data.data.map(item => ({
            value: item.courseId,
            label: item.name
        }));
    });
}
const RecordList = ref([])
const getRecordList = () => {
    BusinessRecord(businessId).then(res => {
        RecordList.value = res.data.data
    })
}

const getSexList = () => {
    BusinessSex().then((res: any) => {
        if (res.data.code != 200) return ElMessage.error("查询课程失败");
        genderOption.value = res.data.data.map(item => ({
            value: item.dictValue,
            label: item.dictLabel
        }));
    });
}
const getOccupationList = () => {
    BusinessOccupation().then((res: any) => {
        if (res.data.code != 200) return ElMessage.error("查询课程失败");
        occupationOption.value = res.data.data.map(item => ({
            value: item.dictValue,
            label: item.dictLabel
        }));
    });
}
const getEducationList = () => {
    BusinessEducation().then((res: any) => {
        if (res.data.code != 200) return ElMessage.error("查询课程失败");
        educationOption.value = res.data.data.map(item => ({
            value: item.dictValue,
            label: item.dictLabel
        }));
    });
}
const getStatusList = () => {
    BusinessStatus().then((res: any) => {
        if (res.data.code != 200) return ElMessage.error("查询课程失败");
        statusOption.value = res.data.data.map(item => ({
            value: item.dictValue,
            label: item.dictLabel
        }));
    });
}
const getFocusList = () => {
    BusinessFocus().then((res: any) => {
        if (res.data.code != 200) return ElMessage.error("查询课程失败");
        focusOption.value = res.data.data.map(item => ({
            value: item.dictValue,
            label: item.dictLabel
        }));
    });
}
const getTypeList = () => {
    BusinessType().then((res: any) => {
        if (res.data.code != 200) return ElMessage.error("查询课程失败");
        typeOption.value = res.data.data.map(item => ({
            value: item.dictValue,
            label: item.dictLabel
        }));
    });
}
onMounted(() => {
    getDetailList()
    getClassList()
    getSexList()
    getOccupationList()
    getEducationList()
    getStatusList()
    getFocusList()
    getTypeList()
    getRecordList()
})
</script>

<style scoped lang="scss">
.bD {
    width: 100%;

    .left {
        width: 80%;
        float: left;

        .one {
            width: 100%;
            margin-top: 10px;
            box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1);
            border: #ccc 1px solid;
            margin-bottom: 20px;

            .header {
                padding: 0 15px;
                padding-top: 10px;
                border-bottom: 1px solid #ccc;
            }

            .con {
                padding: 5px 10px;
                display: flex;

                .item {
                    width: 33%;

                    h4 {
                        font-style: italic;
                        font-weight: 600;
                    }


                }

                .item_last {
                    width: 100%;

                    h4 {
                        font-style: italic;
                        font-weight: 600;
                    }
                }
            }
        }

        .footer {
            display: flex;
            justify-content: flex-end;
            height: 50px;
            align-items: center;

            .el-button {
                margin-right: 10px;
            }
        }
    }

    .right {
        margin-top: 10px;
        width: 18%;
        box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1);
        border: #ccc 1px solid;
        float: right;
        min-height: 50px;

        .header {
            padding: 0 15px;
            padding-top: 10px;
            border-bottom: 1px solid #ccc;
        }

        .con {
            padding: 20px;

            h2 {
                font-style: italic;
                font-weight: 800;
                font-size: 18px;

                span {
                    font-style: normal;
                    font-weight: 400;
                }
            }

            p {
                color: #999;
                font-size: 14px;
            }
        }
    }
}
</style>